<section id="template-edit-preview">
    <div class="tmp-preview-title ptb-10 clearfix">
        <h3 class="font-16 pull-left font-nm">账单打印模版</h3>
    </div>
    <section>
        <h3 class="tmp-preview-name">{{moduleName}}</h3>
        <!-- 模版 -->
        <section id="print-content">
            <div class="tmp-preview-wrap" :style="pageStyle">
                <!-- 头部 -->
                <div>
                    <div v-for="(item,index) in headPerData" class="preview-Item">
                        <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }" v-for="(item1,index1) in item">
                            <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                            <span>{{item1.eleVal}}</span>
                            </span>
                            <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                            </span>
                            <span v-if="item1.eleType === 'ph' "></span>
                        </div>
                    </div>
                </div>
                <!-- 中部 -->
                <div>
                    <div class="tbhead">
                        <table cellpadding="0" cellspacing="0" width='100%' style="border-top:1px solid #333;">
                            <tr>
                                <th v-for="(item,index) in tbHead" v-if="item.eleShow == 'Y'">{{item.eleDispName ? item.eleDispName : item.eleName}}</th>
                            </tr>
                            <tr v-for="(item,index) in tbContent">
                                <td v-for="(item1,index1) in item" v-if="item1.eleShow == 'Y'">{{item1.value | formatUndefined}}</td>
                            </tr>
                        </table>

                    </div>
                </div>
                <!-- 尾部 -->
                <div>
                    <div v-for="(item,index) in footerPerData" class="preview-Item">
                        <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }" v-for="(item1,index1) in item">
                            <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                            <span>{{item1.eleVal}}</span>
                            </span>
                            <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                            </span>
                            <span v-if="item1.eleType === 'ph' "></span>
                        </div>
                    </div>
                </div>

                <!-- 水印图 -->
                <div class="watermark-preview-wrap" v-for="(item,index) in watermarkData">
                    <img class="watermark-preview-image" :src="item.url" alt="水印图" :style="watermarkStyle[index]">
                    <div class="mark" :style="watermarkStyle[index]">
                        <span class="edit" @click="editWatermark(index)" style="white-space:nowrap;">编辑</span>
                        <span class="del" @click="deleteWatermark(index)" style="white-space:nowrap;">删除</span>
                    </div>
                </div>

            </div>
        </section>
    </section>

    <div class="tmp-tail-line"></div>
    <div style="marginLeft:24px;marginBottom:10px;">
        <button type="button" class="btn n-btn-default mr-10" @click="editTemplate">编辑模版</button>
        <button type="button" class="btn n-btn-default mr-10" @click="saveTemplate">保存模版</button>
        <button type="button" class="btn n-btn-default" @click="showWatermarkLayer">添加水印</button>
    </div>

    <!-- 添加水印 -->
    <div class="pop box-o-shadow tmp-watermark-pop" v-show="isShowWatermarkLayer" style="width:600px;">
        <div class="head-pop font-16"><span>添加水印</span>
            <button class="fw-close absolute close" type="button" @click="closeWatermarkLayer">×</button>
        </div>
        <div class="content-pop">
            <div class="content" style="padding:20px 10px;">
                <div class="dy-flex mb-10">
                    <div class="dy-fx-1 line-34">图片：</div>
                    <div class="dy-fx-8 image-wrap">
                        <img :src="watermarkUrl" alt="水印图片" v-if="watermarkUrl">
                        <button type="button" class="btn n-btn-default" id="upload-watermark">{{watermarkBtn}}</button>
                    </div>
                </div>
                <div class="dy-flex mb-10">
                    <div class="dy-fx-1 line-34">尺寸：</div>
                    <div class="dy-fx-8 size-wrap">
                        <div>
                            <span>宽</span>
                            <input type="number" class="form-control" v-model="imageWidth">
                        </div>
                        <div>
                            <span>高</span>
                            <input type="number" class="form-control" v-model="imageHeight">
                        </div>
                    </div>
                </div>
                <div class="dy-flex">
                    <div class="dy-fx-1 line-34">位置：</div>
                    <div class="dy-fx-8 position-wrap">
                        <ul>
                            <li v-for="(item,index) in positionList" :class="{'active':watermarkPosition == item.name}" @click="selectPosition(item.name)">{{item.name}}</li>
                        </ul>
                    </div>
                </div>
                <div class="dy-flex">
                    <div class="dy-fx-1 line-34">边距：</div>
                    <div class="dy-fx-8 size-wrap">
                        <div v-for="(item,index) in marginList">
                            <span>{{item.name}}</span>
                            <input type="number" class="form-control" v-model="item.value">
                        </div>
                    </div>
                </div>
                <div class="dy-flex mb-10">
                    <div class="dy-fx-1 line-34">透明度：</div>
                    <div class="dy-fx-8 opacity-wrap">
                        <input type="range" value="0" id="slideIpt">
                        <div class="range-value-wrap">
                            <img src="assets/images/range_arrow.png" alt="">
                            <div class="content">{{opacityValue}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fw-button">
            <button type="button" class="fw-submit yes mr-10" @click="confirmAddWatermark">确认</button>
            <button type="button" class="fw-submit no" @click="closeWatermarkLayer">取消</button>
        </div>
    </div>

    <div class="backdrop" v-if="isShowWatermarkLayer"></div>
</section>

<script src="modules/print_template/scripts/bill_tmp_add_preview.js" charset="utf-8"></script>